<template>
	<form class="content" report-submit="true">
		<view class="content-top">



			<!-- 商品列表信息 -->
			<view class="pla-body">
				<view class="infosetting">商品信息</view>
				<view class='img-list'>
					<view class="pla-img">
						<image :src="formData.image"></image>
					</view>
					<view class="pla-info">
						<view class="ply-name">{{formData.title}}</view>
						<view style="color: #999999;font-size: 12px;overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;">{{formData.subtitle}}</view>
						<view style="color: #666666;font-size: 12px;padding-top: 10px;">{{formData.price}}积分</view>
					</view>
					<view class="pla-num">
						<view style="font-size: 14px;color: #333333;font-weight: bold;">{{formData.price}}积分</view>
						<view style="color: #999999;font-size: 12px;">×{{formData.stocknum}}</view>
					</view>
				</view>
				<view class="count">
					<view style="font-size: 12px;">总额</view>
					<view style="font-size: 12px;">{{formData.stocknum*formData.price}} 积分</view>
				</view>

				<view class="count" style="padding: 10px;border-top: 1px solid #EFEFF4;">
					<view style="font-size: 13px;color: #333333;">实付积分</view>
					<view style="font-size: 13px;color: #333333;">{{formData.stocknum*formData.price}} 积分</view>
				</view>


			</view>

			<view class="button-bottom" style="background-color: #fff">
				<view class="button-bottom-c">
					<view class="button-bottom-c-t"></view>
					<view class="button-bottom-c-b"><text style="color: #999999;">共 {{formData.stocknum}} 件，</text><text class="red-price">合计：{{formData.stocknum*formData.price}}
							积分</text></view>
				</view>
				<button class='btn btn-square btn-b' hover-class="btn-hover2" form-type="submit" @click="hanldExchange()">立即兑换</button>
			</view>
		</view>

		<view class="search-body">
			<view class="dialog-container" v-if="tokenShow">
				<view class="dialog-mask"></view>
				<view class="dialog-info">
					<view class="dialog-title">您还未授权</view>
					<view class="dialog-content">请先授权再进行操作</view>
					<view class="dialog-footer">
						<button @click="dontLogin()" class="dialog-btn">暂不登录</button>
						<button @getuserinfo="getLogin" open-type="getUserInfo" class="dialog-btn" style="background-color:#FF5F49;color: #fff;">立即授权</button>
					</view>
				</view>
			</view>
		</view>
		<!--领取地址弹框-->
		<uni-popup ref="popuphy" type="center" :maskClick="false">
			<view class="huany">
				<view style="text-align: center;color: #333333;font-size: 14px;padding: 15px 0;font-weight: bold;">温馨提示</view>
				<view style="padding: 0 10px;">领奖时间：<text style="font-weight: normal;">{{award_date}}</text></view>
				<view style="padding: 0 10px;">领奖地址：<text style="font-weight: normal;">{{award_address}}</text></view>
				<view style="padding: 0 10px;">领奖地址：<text style="font-weight: normal;">请一个月内至社区图书馆领取</text></view>
				
				<view class="but-huany">
					<view class="but-ok" @click="hanldNoGood()">确定</view>
				</view>
			</view>
		</uni-popup>
	</form>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				num: '',
				formData: "",
				token: "",
				tokenShow: "",
				award_address: "",
				award_date: ""
			}
		},
		components: {
			uniPopup,
		},
		onLoad(option) {
			if (option.address) {
				let aa = option.address;
				let bb = decodeURIComponent(aa)
				this.formData = JSON.parse(bb);
				this.num = this.formData.stocknum;
				console.log(this.formData)
				this.formData.content = this.formData.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" '); //图片自适应问题
			}
		},
		onShow() {
			this.getAddress()
			this.token = uni.getStorageSync('accessToken');
			// this.$refs.popuphy.open();
		},
		methods: {
			//地点时间
			getAddress() {
				this.$http.get('/index/config', {
					header: {
						token: ""
					}
				}).then((response) => {
					const res = response.data;
					console.log(res);
					if (res.code == 0) {

						this.award_date = res.data.award_date;
						this.award_address = res.data.award_address;
					}
				})
			},
			//领奖确认
			hanldNoGood() {
				this.$refs.popuphy.close();
				uni.navigateBack()
			},
			hanldExchange() {
				if (this.token == '') {
					this.tokenShow = true;
				} else {
					const formData = {
						id: this.formData.id,
						num: this.num,
					}
					let that = this;
					that.$http.post('/shop/buy', formData).then((response) => {
						const res = response.data;
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							setTimeout(function() {
								that.$refs.popuphy.open();
							}, 1000);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					})

				}

			},
			dontLogin() {
				this.tokenShow = false
			},
			//授权
			getLogin() {
				var that = this;
				wx.login({
					//获取code 使用wx.login得到的登陆凭证，用于换取openid==token代替
					success(res) {
						if (res.code) {
							console.log(res.code);
							that.code = res.code;
							//使用 wx.getSetting 获取用户当前的授权状态。
							wx.getSetting({
								success(res) {
									if (res.authSetting['scope.userInfo']) { //已授权=>getUserInfo
										wx.getUserInfo({
											success(res) {
												console.log(res)
												console.log("ressss")
												console.log(that.userinfo)

												const formData = {
													code: that.code,
													avatar: res.userInfo.avatarUrl,
													nickname: res.userInfo.nickName
												}
												that.$http.post('/login/wxLogin', formData).then((response) => {
													const res = response.data;
													console.log(res.data.token);
													if (res.data.token) {
														that.$http.setConfig((config) => { /* 设置全局配置 */
															config.header = {
																...config.header,
																token: res.data.token,
															}
															return config
														})
														wx.setStorageSync("accessToken", res.data.token); //成功之后存入token
													}
													that.token = res.data.token;
													that.tokenShow = false;
													uni.showToast({
														title: res.msg,
														icon: 'none'
													});
												})
											},
											fail(err) {
												console.log(err)
											}
										})
									}
								}
							})
						} else {
							console.log("登录失败！" + res.errMsg);
						}
					}
				});
			}
		},

	}
</script>

<style scoped>
	.content {
		background-color: #F7F7F7;
		padding: 0;
	}



	.button-bottom button {
		height: 100%;
		width: 280upx;
	}

	.button-bottom-c {
		display: inline-block;
		position: relative;
		padding: 10upx 26upx;
		height: 100%;
		width: 470upx;
		float: left;
		font-size: 22upx;
		color: #666;
		overflow: hidden;
	}

	.button-bottom-c-t {
		font-size: 22upx;
		color: #999;
		display: inline-block;
		float: left;
		height: 100%;
		line-height: 70upx;
	}

	.button-bottom-c-b {
		font-size: 26upx;
		color: #333;
		display: inline-block;
		float: right;
		height: 100%;
		line-height: 70upx;
	}

	.btn-b {
		background-color: #FF5F49;
		font-size: 16px;
	}

	.pla-body {
		margin: 10px 16px 10px 16px;
		border-radius: 4px;
		background-color: #fff;
	}

	.img-list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.pla-img {
		margin: 10px;
	}

	.pla-img image {
		width: 90px;
		height: 90px;
		border-radius: 4px;
	}

	.infosetting {
		padding: 12px 10px;
		border-bottom: 1px solid #EFEFF4;
		color: #999999;
		font-size: 13px;
	}

	.pla-num {
		width: 135px;
		padding-top: 10px;
		text-align: right;
		padding-right: 10px;
	}

	.ply-name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #333333;
		font-weight: bold;
		font-size: 12px;
	}

	.pla-info {
		width: 480upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.count {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #999999;
		padding: 0 10px;
	}

	.red-price {
		font-size: 16px;
	}

	/*授权*/
	.dialog-mask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
	}

	.dialog-info {
		position: fixed;
		z-index: 5000;
		width: 80%;
		max-width: 600rpx;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #ffffff;
		text-align: center;
		overflow: hidden;
	}

	.dialog-title {
		font-size: 36rpx;
		padding: 30rpx 30rpx 10rpx;
	}

	.dialog-content {
		padding: 10rpx 30rpx 20rpx;
		min-height: 80rpx;
		font-size: 32rpx;
		line-height: 1.3;
		word-wrap: break-word;
		word-break: break-all;
		color: #999999;
	}

	.dialog-footer {
		display: flex;
		align-items: center;
		position: relative;
		line-height: 90rpx;
		font-size: 34rpx;
	}

	.dialog-btn {
		display: block;
		-webkit-flex: 1;
		flex: 1;
		position: relative;
		font-size: 16px;
	}

	button {
		background-color: #fff;
		border-radius: 0;
	}

	button::after {
		border-radius: 0;
	}

	.huany {
		background-color: #fff;
		height: 200px;
		width: 300px;
		border-radius: 5px;
		color: #333333;
		font-size: 14px;
		position: relative;
	}

	.but-huany {
		display: flex;
		flex-direction: row;
		height: 44px;
		font-size: 14px;
		line-height: 44px;
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.but-qu {
		background-color: #DBDBDB;
		width: 50%;
		line-height: 44px;
		text-align: center;
	}

	.but-ok {
		background-color: #FF5F49;
		width: 100%;
		line-height: 44px;
		text-align: center;
		color: #FFFFFF;
	}
</style>
